<script setup>
import { ref, onMounted } from 'vue'
import pageContainer from '@/components/pageContainer.vue'
import {
  propertyTotalService,
  hotPropertyTotalService,
  orderTotalService,
  evaluateTotalService
} from '@/apis/home'

// 控制子组件内content模块的显示
const shouldShowContent = ref(true)

// 柱状图
import BarChart from '@/views/Home/components/BarChart.vue'

// 饼图
import PieChart from '@/views/Home/components/PieChart.vue'

// 折线图
import LineChart from '@/views/Home/components/LineChart.vue'

// 存储首页统计数据
const countData = ref({
  propertyCount: '',
  hotPropertyCount: '',
  orderCount: '',
  evaluateCount: ''
})

// 获取房源总数
const getPropertyCount = async () => {
  const res = await propertyTotalService()
  countData.value.propertyCount = res.data.data
}
// 获取看房总数
const getHotPropertyCount = async () => {
  const res = await hotPropertyTotalService()
  countData.value.hotPropertyCount = res.data.data
}
// 获取用户评价总数
const getOrderCount = async () => {
  const res = await orderTotalService()
  countData.value.orderCount = res.data.data
}
// 获取热门房源总数
const getEvaluateCount = async () => {
  const res = await evaluateTotalService()
  countData.value.evaluateCount = res.data.data
}

onMounted(() => {
  getPropertyCount(), getHotPropertyCount(), getOrderCount(), getEvaluateCount()
})
</script>

<template>
  <el-row justify="space-around">
    <el-col :span="5">
      <pageContainer title="房源总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jiaoyizonglan-"></use>
          </svg>
        </template>

        <template #label>
          <div class="label">当前房源总数</div>
        </template>

        <template #count>
          <div class="count">
            {{ countData.propertyCount }}
          </div>
        </template>
      </pageContainer>
    </el-col>
    <el-col :span="6">
      <pageContainer title="看房预约总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yuyue"></use>
          </svg>
        </template>

        <template #label>
          <div class="label">当前预约总数</div>
        </template>

        <template #count>
          <div class="count">
            {{ countData.orderCount }}
          </div>
        </template>
      </pageContainer>
    </el-col>
    <el-col :span="6">
      <pageContainer title="用户评价总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-pingjia"></use>
          </svg>
        </template>

        <template #label>
          <div class="label">当前评价总数</div>
        </template>

        <template #count>
          <div class="count">
            {{ countData.evaluateCount }}
          </div>
        </template>
      </pageContainer>
    </el-col>
    <el-col :span="5">
      <pageContainer title="热门房源总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huobao"></use>
          </svg>
        </template>

        <template #label>
          <div class="label">当前热门房源总数</div>
        </template>

        <template #count>
          <div class="count">
            {{ countData.hotPropertyCount }}
          </div>
        </template>
      </pageContainer>
    </el-col>
  </el-row>

  <el-row style="margin-top: 20px" justify="space-around">
    <el-col :span="7">
      <pageContainer title="房源类型柱形图">
        <!-- 柱状图 -->
        <BarChart></BarChart>
      </pageContainer>
    </el-col>

    <el-col :span="9">
      <pageContainer title="城市房源平均价格折线图">
        <!-- 折线图 -->
        <LineChart></LineChart>
      </pageContainer>
    </el-col>

    <el-col :span="7">
      <pageContainer title="用户评价饼图">
        <!-- 饼图 -->
        <PieChart></PieChart>
      </pageContainer>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.label {
  font-size: 16px;
  color: #909399;
  margin: 20px;
  margin-top: 0;
}

.count {
  font-size: 40px;
  font-weight: bold;
}
</style>
